图片上传的第二种形式-白红宇

之前有说了一种以base64的图片上传形式，这次来说说另外一种，其实很简单，很早以前都是在form提交的时候再controller中处理，现在基本不会这么做，都是通过ajax来实现异步上传的

首先需要引入jquery.ui.widget.js以及jquery.fileupload.js这两个js，

HTML代码：

构建js对象并且初始化：

$('#idcardImageNegativeUpload').fileupload({            dataType: 'json',            done: function (e, data) {                console.log(data);                                  if (data.result.status != "200") {                    alert("图片大小不能超过2M...");                } else {                    $.each(data.result.data, function (index, file) {                      $("#idcardImageNegativeContent").html("");                      $("#idcardImageNegative").attr("value", file.urlDB);                  });                 }            },                    change: function (e, data) {                var size = data.files[0].size;                            if((size / 1024 / 1024) > 2) {                    alert("图片大小不能超过2M...");                    return false;                }               }        });

后台controller以及service处理，需要调用fastdfs客户端上传

@RequestMapping(value="/upload", method = RequestMethod.POST)    @ResponseBody    public LeeJSONResult upload(MultipartHttpServletRequest request, HttpServletResponse response) throws Exception {        List
     
       picList = new ArrayList
      
       ();                Iterator
       
         itr = request.getFileNames();        MultipartFile mpf = null;        while (itr.hasNext()) {            mpf = request.getFile(itr.next());            PictureResult pic = pictureService.uploadPic(mpf);            picList.add(pic);        }                return LeeJSONResult.ok(picList);    }

@Override    public PictureResult uploadPic(MultipartFile picFile) {        PictureResult result = new PictureResult();        // 判断图片是否为空        if (picFile.isEmpty()) {            result.setError(YesOrNo.YES.value);            result.setMessage("图片为空");            return result;        }        // 上传到图片服务器        try {            // 取图片扩展名            String originalFilename = picFile.getOriginalFilename();            // 取扩展名不要“.”            String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);            FastDFSClient client = new FastDFSClient("classpath:resource/client.conf");            String url = client.uploadFile(picFile.getBytes(), extName);            // 把url响应给客户端            result.setError(YesOrNo.NO.value);            result.setUrlDB(url);            result.setUrl(IMAGE_SERVER_BASE_URL + url);        } catch (Exception e) {            e.printStackTrace();            result.setError(YesOrNo.YES.value);            result.setMessage("图片上传失败");        }        return result;    }

上传的效果如此，最后通过上传后的路径，直接使用form序列化再提交保存到数据库中即可

最近实在很忙，时间很碎片化，一方面公司的产品急着做，另一方面又在做自己的产品以及一套开源权限，同时又在着手准备开公司的事情，所以在文章更新的频率上放缓了脚步，希望大家谅解，等事情告一段落后给大家每人发个红包（限公众号粉丝）哈~！